<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index111.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <form id="form">
        <p> 姓名<input id="username" type="text" placeholder="输入姓名：张三" />
        </p>
        <p>年龄<input id="age" type="text" placeholder="输入年龄：21" /></p>
        <p>
          性别
          <select id="gender">
            <option value="" disabled selected>----性别----</option>
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="你猜">你猜</option>
          </select>
        </p>

        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
          <input type="button" value="查看" id="selBtn" />
        </p>
</form>
      <table id="table"><thead><tr><td>学号</td><td>姓名</td><td>性别</td><td>年龄</td><td>操作</td></tr></thead><tbody></tbody></table>
    </div>

    <script>
        let xhr;
        let data=[];
        if(window.XMLHttpRequest){
          xhr=new XMLHttpRequest;
        }
        else{
          xhr=new ActiveXObject();
        }
        function $(ele){
          return document.querySelector(ele);
        }
        var addBtn = $("#addBtn");
       var sortBtn = $("#sortBtn");
  function rendom(data){
       //构建表格
      $("tbody").innerHTML="";//页面置空
      data.forEach(item=>{
        var trEle = document.createElement("tr");
       trEle.style.background = "white";
       trEle.innerHTML = `<td class="stuId">${item.id}</td><td>${item.username}</td><td>${item.gender}</td><td>${item.age}</td><td><button class="btn">删除</button></td>`;
       $("tbody").appendChild(trEle);
      })
      del(data);//每次渲染重新绑定
  }
     function del(data){
      var btns = document.querySelectorAll(".btn");
        Array.from(btns).forEach(function (item, i) {
          item.onclick = function () {
            xhr.open("post","delStu.php",true);
          xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
          xhr.send(`id=${data[i].id}`);
          xhr.onload=function(){
                data.splice(i,1);
                console.log(data);
                rendom(data);
             }
          };
        });
     }
      addBtn.onclick = function () {
        //添加操作 必须写年龄&姓名才能添加
        var username = document.getElementById("username").value;
        var age = document.getElementById("age").value;
        var gender = document.getElementById("gender").value;
         
        if (age!=undefined&&username!= "") {
          xhr.open("post","addStu.php",true);
          xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
          xhr.send(`username=${username}&age=${age}&gender=${gender}`);
          xhr.onload=function(){
                data=JSON.parse(xhr.responseText);
                rendom(data);
             }
        }
        // 删除操作
      };
      
    </script>
    </script>
  </body>
</html>